<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Окна</title>

    <link rel="stylesheet" href="css/window.css">

    <script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
    <script type="text/javascript" src="js/window.js"></script>

</head>
<body>

<div class="content" style="width: 90%; margin: 1em auto;">

    <div id="Translation">

        <h3>Классический текст Lorem Ipsum, используемый с XVI века</h3>

        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
            dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
            ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat
            nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit
            anim id est laborum."</p>

        <h3>Абзац 1.10.32 "de Finibus Bonorum et Malorum", написанный Цицероном в 45 году н.э.</h3>

        <p>"Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem
            aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
            Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni
            dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor
            sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore
            magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis
            suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in
            ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas
            nulla pariatur?"</p>

        <h3>Английский перевод 1914 года, H. Rackham</h3>

        <p>"But I must explain to you how all this mistaken idea of denouncing pleasure and praising pain was born and I
            will give you a complete account of the system, and expound the actual teachings of the great explorer of
            the truth, the master-builder of human happiness. No one rejects, dislikes, or avoids pleasure itself,
            because it is pleasure, but because those who do not know how to pursue pleasure rationally encounter
            consequences that are extremely painful. Nor again is there anyone who loves or pursues or desires to obtain
            pain of itself, because it is pain, but because occasionally circumstances occur in which toil and pain can
            procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical
            exercise, except to obtain some advantage from it? But who has any right to find fault with a man who
            chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no
            resultant pleasure?"</p>

        <h3>Абзац 1.10.33 "de Finibus Bonorum et Malorum", написанный Цицероном в 45 году н.э.</h3>

        <p>"At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti
            atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique
            sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum
            facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil
            impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor
            repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et
            voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus,
            ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."</p>

        <h3>Английский перевод 1914 года, H. Rackham</h3>

        <p>"On the other hand, we denounce with righteous indignation and dislike men who are so beguiled and
            demoralized by the charms of pleasure of the moment, so blinded by desire, that they cannot foresee the pain
            and trouble that are bound to ensue; and equal blame belongs to those who fail in their duty through
            weakness of will, which is the same as saying through shrinking from toil and pain. These cases are
            perfectly simple and easy to distinguish. In a free hour, when our power of choice is untrammelled and when
            nothing prevents our being able to do what we like best, every pleasure is to be welcomed and every pain
            avoided. But in certain circumstances and owing to the claims of duty or the obligations of business it will
            frequently occur that pleasures have to be repudiated and annoyances accepted. The wise man therefore always
            holds in these matters to this principle of selection: he rejects pleasures to secure other greater
            pleasures, or else he endures pains to avoid worse pains."</p>
    </div>

</div>

<div id="widget_right_panel" class="calculatorwhite roundcorner">
    <ul>
        <li><a class="calculator_calc" href="javascript:void(0);"><span>Калькулятор</span></a></li>
        <li><a class="meedget_online" href="javascript:void(0);"><span>Вызвать замерщика</span></a></li>
        <li><a class="meedget_bonus" href="javascript:void(0);"><span>Подарки и скидки!</span></a></li>
        <li><a class="calculator_gallery" href="javascript:void(0);"><span>Наши работы</span></a></li>
    </ul>
    <a class="close_calculator" href="javascript:void(0);" style="display: block;">свернуть</a>
    <a class="open_right_panel" href="javascript:void(0);" style="display: none;"></a>
</div>

<form id="calc_form" action="file.php" method="post">
    <div id="calculator_popup" style="display: none">
        <div id="calculator_block" class="roundcorner"><a href="javascript:void(0);" class="calculator_close_link"></a>

            <div id="meedget_popup_content"><h2>Калькулятор</h2>

                <div id="meedget_calc_inner">
                    <div data-step="1" style="display: block;">
                        <div class="calculator_step">Шаг: <span>1</span> из <span>5</span>

                            <div class="step_arrow"></div>
                        </div>
                        <div class="calculator_inner"><h3 class="meedget_question">Выберите тип забора</h3>

                            <p style="font-size:15px"></p>

                            <div class="calculator_center calculator_label_radio">

                                <div class="calculator_block"><img alt=""
                                                                src="img/stuff/c0_000_000_440_tmb.jpg"><input
                                        id="ans0-01" name="ans0" value="0" type="radio"><label for="ans0-01">Забор из
                                    профнастила</label></div>

                                <div class="calculator_block"><img alt=""
                                                                src="img/stuff/c0_000_000_w3a_tmb.jpg"><input
                                        id="ans0-11" name="ans0" value="1" type="radio"><label for="ans0-11">Забор из
                                    сетки 3 д</label></div>

                                <div class="calculator_block"><img alt=""
                                                                src="img/stuff/c0_000_000_6i2_tmb.jpg"><input
                                        id="ans0-21" name="ans0" value="2" type="radio"><label for="ans0-21">Забор из
                                    сетки рабица</label></div>
                                <div class="calculator_block"><img alt=""
                                                                src="img/stuff/c0_000_000_ExS_tmb.jpg"><input
                                        id="ans0-31" name="ans0" value="3" type="radio"><label for="ans0-31">Каменный
                                    забор</label></div>

                                <div class="calculator_block"><img alt=""
                                                                src="img/stuff/c0_000_000_e80_tmb.jpg"><input
                                        id="ans0-41" name="ans0" value="4" type="radio"><label for="ans0-41">Кованый
                                    забор</label></div>

                                <div class="calculator_block"><img alt=""
                                                                src="img/stuff/c0_000_000_x5Q_tmb.jpg"><input
                                        id="ans0-51" name="ans0" value="5" type="radio"><label for="ans0-51">Сварной
                                    забор</label></div>

                                <div class="calculator_block"><img alt=""
                                                                src="img/stuff/c0_000_000_M72_tmb.jpg"><input
                                        id="ans0-71" name="ans0" value="7" type="radio"><label for="ans0-71">Забор из
                                    бетонных блоков комбинированный</label></div>

                                <div class="calculator_block"><img alt=""
                                                                src="img/stuff/c0_000_000_Q7U_tmb.jpg"><input
                                        id="ans0-81" name="ans0" value="8" type="radio"><label for="ans0-81">
                                    Кирпичный забор</label></div>

                                <div class="calculator_block"><img alt=""
                                                                src="img/stuff/c0_000_000_85K_tmb.jpg"><input
                                        id="ans0-91" name="ans0" value="9" type="radio"><label for="ans0-91">Забор из
                                    металического штакетника</label></div>

                                <div class="calculator_block"><img alt=""
                                                                src="img/stuff/c0_000_000_Z20_tmb.jpg"><input
                                        id="ans0-101" name="ans0" value="10" type="radio"><label for="ans0-101">Забор
                                    из деревянного штакетника</label></div>

                            </div>
                        </div>
                        <div class="calculator_center"><a class="calculator_back calculator_back_link meedget_calc_back"
                                                       href="javascript:void(0);" style="display:none;">К предыдущему
                            шагу</a>
                            <button class="calculator_calc_next calculator_step_button" type="submit">Cледующий шаг</button>
                        </div>
                    </div>
                    <div data-step="2" style="display:none;">
                        <div class="calculator_step">Шаг: <span>2</span> из <span>5</span>

                            <div class="step_arrow"></div>
                        </div>
                        <div class="calculator_inner"><h3 class="meedget_question">Выбираете тип ворот и калитки</h3>

                            <p style="font-size:15px"></p>

                            <div class="calculator_center calculator_label_radio">

                                <div class="calculator_block"><input id="ans1-01" name="ans1[]" value="0"
                                                                  type="checkbox"><label for="ans1-01">Откатные
                                    ворота с автоматикой</label></div>

                                <div class="calculator_block"><input id="ans1-11" name="ans1[]" value="1"
                                                                  type="checkbox"><label for="ans1-11">Откатные
                                    ворота без автоматики</label></div>

                                <div class="calculator_block"><input id="ans1-21" name="ans1[]" value="2"
                                                                  type="checkbox"><label for="ans1-21">Распашные
                                    ворота</label></div>

                                <div class="calculator_block"><input id="ans1-31" name="ans1[]" value="3"
                                                                  type="checkbox"><label for="ans1-31">Распашные
                                    ворота с автоматикой</label></div>

                                <div class="calculator_block"><input id="ans1-41" name="ans1[]" value="4"
                                                                  type="checkbox"><label for="ans1-41">Калитка в
                                    рамке</label></div>

                                <div class="calculator_block"><input id="ans1-51" name="ans1[]" value="5"
                                                                  type="checkbox"><label for="ans1-51">Простая
                                    калитка</label></div>

                                <div class="calculator_block"><input id="ans1-61" name="ans1[]" value="6"
                                                                  type="checkbox"><label for="ans1-61">Распашные
                                    ворота в рамке</label></div>

                            </div>
                        </div>
                        <div class="calculator_center"><a class="calculator_back calculator_back_link meedget_calc_back"
                                                       href="javascript:void(0);" style="display: inline;">К предыдущему
                            шагу</a>
                            <button class="calculator_calc_next calculator_step_button" type="submit">Cледующий шаг</button>
                        </div>
                    </div>
                    <div data-step="3" style="display:none;">
                        <div class="calculator_step">Шаг: <span>3</span> из <span>5</span>

                            <div class="step_arrow"></div>
                        </div>
                        <div class="calculator_inner"><h3 class="meedget_question">Введите длину забора (просто введите
                            число) в
                            метрах</h3>

                            <p style="font-size:15px"></p>

                            <div class="calculator_center calculator_label_radio">
                                <div>
                                    <div class="calculator_block"><img alt=""
                                                                    src="img/stuff/c0_000_003_1Rg_tmb.jpg">

                                        <p></p> <input value="" placeholder="Введите ответ" style="width:130px"
                                                       id="ans2-01"
                                                       name="ans2" type="text"></div>
                                </div>
                            </div>
                        </div>
                        <div class="calculator_center"><a class="calculator_back calculator_back_link meedget_calc_back"
                                                       href="javascript:void(0);" style="display: inline;">К предыдущему
                            шагу</a>
                            <button class="calculator_calc_next calculator_step_button" type="submit">Cледующий шаг</button>
                        </div>
                    </div>
                    <div data-step="4" style="display:none;">
                        <div class="calculator_step">Шаг: <span>4</span> из <span>5</span>

                            <div class="step_arrow"></div>
                        </div>
                        <div class="calculator_inner"><h3 class="meedget_question">Введите высоту забора (просто введите
                            число) в
                            метрах</h3>

                            <p style="font-size:15px"></p>

                            <div class="calculator_center calculator_label_radio">
                                <div>
                                    <div class="calculator_block"><img alt=""
                                                                    src="img/stuff/c0_004_001_A53_tmb.jpg">

                                        <p></p> <input value="" placeholder="Введите ответ" style="width:130px"
                                                       id="ans3-01"
                                                       name="ans3" type="text"></div>
                                </div>
                            </div>
                        </div>
                        <div class="calculator_center"><a class="calculator_back calculator_back_link meedget_calc_back"
                                                       href="javascript:void(0);" style="display: inline;">К предыдущему
                            шагу</a>
                            <button class="calculator_calc_next calculator_step_button" type="submit">Cледующий шаг</button>
                        </div>
                    </div>
                    <div data-step="calc" style="display:none;">
                        <div><h3>Рассчитываем</h3>
                            <br>
                            <img width="220" height="19" alt="spinner" src="img/ajax-loader.gif" style="margin-left: -5px">
                        </div>
                    </div>
                    <div data-step="phone" style="display:none;">
                        <div class="calculator_step">Шаг: <span>5</span> из <span>5</span>

                            <div class="step_arrow"></div>
                        </div>
                        <div><h3>Расчёт готов! Введите номер телефона, мы вышлем на него информацию.</h3>

                            <p class="calculator_center meedget_tel"><input id="calculator_phone_input" value=""
                                                                         name="calculator_phone_input"
                                                                         placeholder="Номер телефона" type="tel">
                                <button type="submit" class="meedget_calc_submit">Получить расчет</button>
                            </p>
                        </div>
                        <div style="z-index:1; background-color: #dedede!important;position: absolute;color:grey;bottom: 0;left: 0;font-size: 13px !important;line-height: 17px !important;">
                            <p style="padding-top: 1% !important;margin: 0 !important;padding-left: 3% !important;padding-right: 3% !important;">
                                Это текст с помощью чего создана форма <a href="http://google.com/">google.com</a></p>

                            <p style="margin: 0 !important;padding-bottom: 1% !important;padding-left: 3% !important;padding-right: 3% !important;text-align: left !important;">
                                Нажимая «Получить расчет» я соглашаюсь на обработку персональных данных и получению
                                информации в соответствии с <a
                                    onclick="document.getElementsByClassName(&quot;meed_modal&quot;)[0].style.display=&quot;block&quot;"
                                    style="color: grey !important;text-decoration: underline !important;cursor: pointer !important;">пользовательским
                                соглашением</a></p></div>
                    </div>
                    <div data-step="finish" style="display:none;">
                        <div><h3>Спасибо, мы скоро с вами свяжемся!</h3></div>
                    </div>
                </div>
            </div>
            <div class="copy_sign"><p>Это текст футера<a href="http://google.com"> это ссылка</a></p></div>
        </div>
    </div>
</form>

<div class="meed_modal" style="display: none"><p class="meed_modal_title">Соглашение об обработке персональных
    данных<span onclick="document.getElementsByClassName('meed_modal')[0].style.display='none'"
                style="float: right !important;font-size: 18px !important;cursor: default !important;position: absolute !important;top: 5px !important;right: 5px !important;color: black !important;">X</span>
</p>

    <div class="meed_modal_body"><p>Данное соглашение об обработке персональных данных разработано в соответствии с
        Федеральным законом Российской Федерации от 27.07.2006 г. № 152-ФЗ «О персональных данных» Все лица заполнившие
        сведения составляющие персональные данные на данном сайте, а также разместившие иную информацию обозначенными
        действиями подтверждают свое согласие на обработку персональных данных и их передачу оператору обработки
        персональных данных.</p>

        <p>Под персональными данными Гражданина понимается нижеуказанная общая информация: Имя, Телефон, E-mail.</p>

        <p>Пользователи, принимая настоящее Соглашение, выражают свою заинтересованность и полное согласие, что
            обработка их персональных данных может включать в себя следующие действия: сбор, систематизацию, накопление,
            хранение, уточнение (обновление, изменение), использование, уничтожение.</p>

        <p>Пользователь гарантирует: информация, им предоставленная, является полной, точной и достоверной; при
            предоставлении информации не нарушается действующее законодательство Российской Федерации, законные права и
            интересы третьих лиц; вся предоставленная информация заполнена Пользователем в отношении себя лично.</p>
    </div>
    <button class="meed_modal_but" onclick="document.getElementsByClassName('meed_modal')[0].style.display='none'">
        ЗАКРЫТЬ
    </button>
</div>

</body>
</html>
